import { useState } from "react"
export const Count = () => {
  let [count, setCount] =useState(0)
  const handleCount= () =>{
    setCount(++count)
  }

  const [name, setName] = useState('jack')
  const changeName = () => {
    setName('roce')
  }

  const [books, setBooks] = useState([
    {id: 1,name: 'React'},
    {id: 2,name: 'Vue'}
  ])
  const addBooks = ()=>{
    setBooks([...books, {id:3,name: 'anglue'}])
  }

  return (
    <div>
      count: {count}
      <button onClick={handleCount}>++</button>
      <hr />
      <h3>{name} <button onClick={changeName}>改名</button></h3>
      <ul>
        {books.map(item => {
        return <li key={item.id}>{item.name}</li>
        })}
      </ul>
      <button onClick={addBooks}>加书</button>
    </div>
  )
}